<template>
  <div>
    <el-table
      :data="tableData"
      stripe
      style="width: 100%">
      <el-table-column
        prop="date"
        label="日期"
        width="180">
      </el-table-column>
      <el-table-column
        prop="name"
        label="姓名"
        width="180">
      </el-table-column>
      <el-table-column
        prop="address"
        label="地址">
      </el-table-column>
    </el-table>

    <div>
      <h3> 合并多列 </h3>
      <el-table
        :data="customTables"
        border
        :span-method="objectSpanMethod"
        style="width: 100%; margin-top: 20px">
        <el-table-column
          prop="f_cate_name"
          label="CategortName"
          width="180">
        </el-table-column>
        <el-table-column
          prop="f_cate_id"
          label=" CategortID">
        </el-table-column>
        <el-table-column
          prop="cate_name"
          label="SecondCateName">
        </el-table-column>
        <el-table-column
          prop="cate_id"
          label="SecondCateID">
        </el-table-column>
      </el-table>
    </div>
  </div>
</template>

<script>
import DB from '../../mock/db.json'
export default {
    data: function () {
        return {
            tableData: [{
              date: '2016-05-02',
              name: '王小虎',
              address: '上海市普陀区金沙江路 1518 弄'
              }, {
              date: '2016-05-04',
              name: '王小虎',
              address: '上海市普陀区金沙江路 1517 弄'
              }, {
              date: '2016-05-01',
              name: '王小虎',
              address: '上海市普陀区金沙江路 1519 弄'
              }, {
              date: '2016-05-03',
              name: '王小虎',
              address: '上海市普陀区金沙江路 1516 弄'
            }],
            customTables: [],
            spanArr: [],
            pos: 0
        }
    },
    created: function () {
      let arr = []
        for (var i =0; i< DB.data.length; i ++) {
          for (var j = 0; j < DB.data[i].sub_cate_list.length; j ++) {
            arr.push(Object.assign({}, {f_cate_id: DB.data[i].cate_id, f_cate_name: DB.data[i].cate_name}, DB.data[i].sub_cate_list[j]))
          }
        }
      this.customTables = arr
      this.getSpanArr(this.customTables)
    },
    methods: {
      getSpanArr(data) {　
        for (var i = 0; i < data.length; i++) {
          if (i === 0) {
            this.spanArr.push(1);
            this.pos = 0
          } else {
            // 判断当前元素与上一个元素是否相同
            if (data[i].f_cate_id === data[i - 1].f_cate_id) {
              this.spanArr[this.pos] += 1;
              this.spanArr.push(0);
            } else {
              this.spanArr.push(1);
              this.pos = i;
            }
          }
        }

        // for (var i = 0; i < DB.data.length; i ++) {
        //   let newArr = new Array(DB.data[i].sub_cate_list.length).fill(0);
        //   newArr[0] = DB.data[i].sub_cate_list.length; // 第一个元素改成元素的长度
        //   this.spanArr = [...this.spanArr, ...newArr];
        // }
      },
      objectSpanMethod({ row, column, rowIndex, columnIndex }) {
        if (columnIndex === 0 || columnIndex === 1) {
          const _row = this.spanArr[rowIndex];
          const _col = _row > 0 ? 1 : 0;
          return {
            rowspan: _row,
            colspan: _col
          }
        }        
      }
    }
}
</script>

<style>

</style>
